<!--  -->
<template>
  <div class="register-view">
    <div class="login-head">
      <i class="iconfont icon-jiantou3" @click="$router.back()"></i>
    </div>
    <div class="login-form">
      <div class="title">注册新用户</div>
      <div class="input-box">
        <i class="iconfont icon-shouji"></i>
        <input type="tel" placeholder="请输入手机号" class="input" v-model="mobile" />
      </div>
      <div class="input-box">
        <i class="iconfont icon-suolvetu"></i>
        <input type="text" placeholder="请输入图片验证码" class="input" v-model="captcha" />
        <!-- 将后台返回的base64格式数据进行展示 -->
        <img :src="captchaSrc" class="j-verify-img" @click="getCaptcha" />
      </div>
      <div class="input-box">
        <i class="iconfont icon-tupianyanzhengma"></i><input type="tel" maxlength="6" placeholder="请输入短信验证码"
          class="input" v-model="code" />
        <div class="send" @click="getCode" ref="send">获取验证码</div>
      </div>
      <div class="input-box">
        <i class="iconfont icon-mima">
        </i><input placeholder="请输入登录密码" :type="pwdFlag ? 'password' : 'text'" class="input" v-model="password" />
        <i class="iconfont icon-xianshi" @click="changePwd" :class="pwdFlag ? '' : 'pwd-show'"></i>
      </div>
      <div class="privacy">
        <van-checkbox v-model="checked" checked-color="#ee0a24">我已阅读并同意</van-checkbox>
        <span class="privacy-link">《隐私声明3》</span>
      </div>
      <div class="signup-button">
        <button class="btn btn-lg-red btn-disabled" @click.prevent="registerBtn">
          新用户注册
        </button>
      </div>
    </div>
    <!---->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 1.输入用户信息向后台发起请求,后台对用户信息进行校验,校验成功后,返回token数据
// 2.把token存储到cookie或者localStorage中
// 3.携带token,进行发送其他请求
// 4.后台校验token,如果token校验成功,那么返回接口数据,如果校验不成功,错误token,token过期
// 5.后台返回校验失败的信息,让用户重新登录
import { userCaptchaApi, userMiscApi, fastLoginApi } from '@/api/user'
import qs from 'qs';
import { Toast } from 'vant';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      pwdFlag: true,
      checked: true,
      // 图像验证返回2个参数:验证captcha,client
      captchaSrc: null,
      client: null,
      mobile: null,
      captcha: null,
      password: null,
      code: null,
      interId: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //改变密码表示
    changePwd: function () {
      this.pwdFlag = !this.pwdFlag;
    },
    // 获取图形验证码的函数
    getCaptcha() {
      userCaptchaApi().then(res => {
        this.captchaSrc = res.data.data.captcha;
        this.client = res.data.data.client;
      })
    },
    // 获取手机验证码
    getCode() {

      // userMiscApi(`captcha=${this.captcha}&client=${this.client}&mobile=${this.mobile}`).then(() => {
      //   console.log(res.data);
      // });
      // 准备发送的参数
      let sendObj = {
        captcha: this.captcha,
        client: this.client,
        mobile: this.mobile,
      };
      // 转换为窗体格式,进行发送post请求
      let secCount = 60;
      userMiscApi(qs.stringify(sendObj)).then(res => {
        console.log('进入');
        if (res.data.status == 'success') {
          this.interId = setInterval(() => {
            if (secCount >= 1) {
              secCount--;
              this.$refs.send.innerText = `重新发送(${secCount})`
            } else {
              clearInterval(interId);
              this.$refs.send.innerText = `获取验证码`
            }
          }, 1000);
        } else {
          Toast(res.data.errors.message);
        }
      })

    },
    // 注册-快捷登录
    registerBtn() {
      let regData = {
        client: this.client,
        mobile: this.mobile,
        code: this.code,
        pwd: this.password,
        // 注册的固定
        allow_login: 0
      }
      fastLoginApi(qs.stringify(regData)).then(res => {
        if (res.data.status == 'success') {
          // 1.将token存储到本地存储中
          localStorage.setItem('token', res.data.data)
          // 2.跳转到我的页面
          this.$router.push('/mineview');
        } else {
          Toast(res.data.errors.message);
        }
      })

    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCaptcha()
  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() {
    clearInterval(this.interId);
  }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.register-view {
  padding: 30px;

  .login-head {
    padding: 10px 0px;
  }

  .login-form {
    .title {
      font-size: 18px;
      font-weight: 700;
      color: #000;
      margin-bottom: 10%;
    }

    .input-box {
      height: 30px;
      line-height: 30px;
      padding: 5px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dcdcdc;
      margin-bottom: 5%;

      i {
        margin-right: 10px;
        color: #666;
        height: 30px;
        line-height: 26px;
        font-size: 20px;
      }

      input {
        flex: 1;
      }
    }

    .j-verify-img {
      height: 2.4rem;
    }

    .send {
      height: 30px;
      line-height: 30px;
      padding: 0 12px;
      border: 1px solid #dcdcdc;
      border-radius: 15px;
      font-size: 12px;
      color: #999;
      margin-left: 10px;
    }

    .privacy {
      display: flex;
      margin: 2rem auto;
    }

    .signup-button {
      padding: 3rem 0;

      .btn {
        height: 40px;
        padding: 0;
        border-radius: 20px;
        line-height: 40px;
        margin-bottom: 5%;
        font-size: 1.4rem;
        color: #fff;
        border: 0;
        text-align: center;
        width: 100%;
      }

      .btn-lg-red {
        background: linear-gradient(-88deg, #ff4f2e, #f91f28);
      }
    }
  }
}
</style>